<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="add">Add</button>
        <button @click="increment">increment</button>
        <button @click="decrement">decrement</button>

        <hr />
        <p id="p">{{ msg }}</p>

        <button @click="fn1">点我</button>
    </div>

    <script>
        console.log('没有 module 的 this', this) // window
    </script>

    <script type="module">
        import { createApp, nextTick } from './lib/vue3.esm.browser.js'

        console.log('global this', this) // undefined


        const vm = createApp({
            data() {
                return {
                    msg: 'Hello',
                    count: 10
                }
            },

            /**
             * 声明函数列表
             *      methods 下的函数，也会被代理到组件的实例身上(this)
             * 
             *      这些函数都被绑定了this, 但是要注意不能写成箭头函数
             */
            methods: {
                add: () => {
                    console.log('add', this.msg)
                },

                increment() {
                    console.log('increment', this.msg)
                },

                decrement: function () {
                    console.log('decrement', this.msg)
                },

                fn1() {
                    console.log('fn1')
                    this.msg += '~'
                    // 立刻获取真实的DOM数据
                    //      发现，不能获取到最新的数据，由于 数据引起页面的更新是异步的操作
                    //      如果需要获取最新的真实DOM数据，可以使用
                    //          1. setTimeout
                    //          2. nextTick     【更推荐，内部会在支持微任务的浏览器中启用微任务队列，执行会被setTimeout更快】
                    //              1. this.$nextTick
                    //              2. Vue.nextTick
                    // nextTick
                    //      等待下一次 DOM 更新刷新的工具方法。
                    //      在下次 DOM 更新循环结束之后执行延迟回调。
                    setTimeout(() => {
                        console.log('setTimeout', document.querySelector('#p').innerHTML)
                    })

                    this.$nextTick(() => {
                        console.log('nextTick', document.querySelector('#p').innerHTML)
                    })
                }
            },

            /**
             * 生命周期的钩子函数，
             *      钩子函数，Vue内部在特定时机会帮我们去调用的函数
             * 
             * mounted: 当前组件被挂载到页面上时出发
             */
            mounted() {
                // this 与 vm 是等价的
                console.log('this', this)
            }
        }).mount('#app')

        console.log('vm', vm)
    </script>
</body>

</html>